

<template>
  <div>
    <slot name="navbar" v-if="this.$defConfig.window.showNavbar">
            <ac-navbar>
                <router-link :to="link || '/'" slot="left">
                    <ac-navbar-back-icon></ac-navbar-back-icon>
                </router-link>
            </ac-navbar>

    </slot>

    <ac-grids-group rows="4">
      <ac-grids-item v-for="(item, index) in list" :key="index" :link="item.link">
        <i slot="icon" :class="item.icon"></i>
        <span slot="text">{{item.name}}</span>
      </ac-grids-item>
    </ac-grids-group>

    <!-- <a href="#/hello">hello</a>
    <a href="#/test">test</a> -->
    <!-- <div v-if="addUser"><a href='#/user'>user</a></div>
    <input type="button" @click="addRout" value="add user 路由" /> -->


    <router-view/>

    <slot name="tabbar">
        <ac-tabbar :fixed=true ></ac-tabbar>
    </slot>
  </div>
</template>
/* eslint-disable */
<script>
import User from '@/pages/demo/user'
import UserInfo from '@/pages/demo/userInfo'
const DynamicRoutes = [
  {
    path: '/user',
    component: User,
    name: 'user'
  },
  {
    path: '/detail/:id',
    component: UserInfo,
    name: 'UserInfo'
  }
]

export default {
  name: 'App',
  data () {
    return {
      // addUser: false
      list: [
          // {icon: 'demo-icons-button', name: 'user', link: '/user'},
          // {icon: 'demo-icons-dialog', name: 'UserInfo', link: '/detail/:id'},
          // {icon: 'demo-icons-cell', name: 'Cell', link: '/cell'},
          {icon: 'demo-icons-button', name: 'Hello', link: '/hello'},
          {icon: 'demo-icons-cell', name: 'Test', link: '/test'},

      ]
    }
  },
  config: {
      window: {
          navigationBarTitleText: "DefaultTitle",
          navigationBarBackgroundColor: '#FF6453',
          navigationBarTextStyle: '#ffff',
          showNavbar: true
      },
      tabbar: {
          showTabbar:true,
          color:"#7A7E83",
          selectedColor:"#0074E8",
          borderStyle:"black",
          backgroudColor:"#ffffff",
          list:[
              {
              pagePath:"/hello",
              iconPath:"home",
              selecedIconPath:"home",
              text:"首页"
              },
              {
              pagePath:"/test",
              iconPath:"ucenter-outline",
              selecedIconPath:"ucenter-outline",
              text:"个人中心"
              }
          ]
      }
  },
  props: {
      link: String,

  },
  methods: {
    addRout () {
      this.addUser = true
      /*  动态添加路由 */
      this.$router.addRoutes(DynamicRoutes)
      // vue bug
      this.$router.options.routes = this.$router.options.routes.concat(DynamicRoutes)
    }
  }
}
</script>

<style lang="less">
    @import "./styles/demo.less";
    @import "../src/styles/base.less";
</style>
